<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="{{ asset('css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('css/xadmin.css') }}">
    <script type="text/javascript" src="{{ asset('lib/layui/layui.js') }}" charset="utf-8"></script>
    <script type="text/javascript" src="{{ asset('js/xadmin.js') }}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #subitem+div {
            width: 500px !important;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                {{ csrf_field() }}
                <input type="hidden" name="user_id" value="{{ Auth::user()->id ?? '' }}">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属周期</label>
                    <div class="layui-input-inline">
                        <select name="period_id" lay-filter="period_id" id="period_id">
                            <option value="">请周期</option>
                            @php
                                $i = 0;
                            @endphp
                            @foreach ($periods as $id => $name)
                                <option value="{{ $id }}" @if ($id == $dormitoryRating->period_id) selected @endif>
                                    {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">宿舍楼</label>
                    <div class="layui-input-inline">
                        <select name="building" lay-filter="building" id="building">
                            <option value="">请选择宿舍楼</option>
                            @foreach ($buildings as $id => $name)
                                <option value="{{ $id }}" @if ($id == $dormitoryRating->dorm->building_id) selected @endif>
                                    {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <label class="layui-form-label"><span class="x-red">*</span>宿舍</label>
                    <div class="layui-input-inline">
                        <select name="dorm_id" id="dorm" lay-filter="dorm" lay-verify="required">
                            <option value="{{ $dormitoryRating->dorm_id }}">{{ $dormitoryRating->dorm->code }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">评比类别</label>
                    <div class="layui-input-inline">
                        <select name="category" lay-filter="category" id="category">
                            <option value="">请选择评比类别</option>
                            @foreach ($categories as $id => $name)
                                <option value="{{ $id }}" @if ($id == $dormitoryRating->dormRatingItem->category_id) selected @endif>
                                    {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="x-red">*</span>评比项</label>
                    <div class="layui-input-inline">
                        <select name="subitem_id" id="subitem" lay-filter="subitem" lay-verify="required">
                            <option value="{{ $dormitoryRating->subitem_id }}" selected>
                                {{ $dormitoryRating->dormRatingItem->subitem_name }}</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="score" class="layui-form-label"><span class="x-red">*</span>得分</label>
                    <div class="layui-input-inline">
                        <input type="number" name="score" id="score" lay-verify="number,required"
                            placeholder="请输入得分" class="layui-input" value="{{ $dormitoryRating->score }}">
                    </div>
                    <label for="rating_date" class="layui-form-label">
                        <span class="x-red">*</span>评分日期
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="rating_date" name="rating_date" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{{ $dormitoryRating->rating_date }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="remarks" class="layui-form-label">备注
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="remarks" name="remarks" autocomplete="off" class="layui-input"
                            value="{{ $dormitoryRating->remarks }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button class="layui-btn" lay-filter="save" lay-submit="">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;
                // 替换静态数据部分
                form.on('select(building)', function(data) {
                    var building_id = data.value;
                    var dormSelect = $('#dorm');

                    dormSelect.empty();

                    if (building_id === '') {
                        dormSelect.append('<option value="">请先选择宿舍楼</option>');
                    } else {
                        // 发起AJAX请求获取宿舍数据
                        $.ajax({
                            url: '/api/getDormsByBuilding',
                            type: 'GET',
                            data: {
                                building_id: building_id
                            },
                            success: function(res) {
                                dormSelect.append('<option value="">请选择宿舍</option>');
                                $.each(res, function(index, dorm) {
                                    dormSelect.append('<option value="' + dorm.id + '">' +
                                        dorm.code + '</option>'
                                    );
                                });
                                form.render('select');
                            }
                        });
                    }
                });

                // 替换静态数据部分
                form.on('select(category)', function(data) {
                    var category_id = data.value;
                    var subItemSelect = $('#subitem');

                    subItemSelect.empty();

                    if (category_id === '') {
                        subItemSelect.append('<option value="">请先选择宿舍楼</option>');
                    } else {
                        // 发起AJAX请求获取宿舍数据
                        $.ajax({
                            url: '/api/getSubitemsByCategory',
                            type: 'GET',
                            data: {
                                category_id: category_id
                            },
                            success: function(res) {
                                subItemSelect.append('<option value="">请选择评分项</option>');
                                $.each(res, function(index, subitem) {
                                    subItemSelect.append('<option value="' + subitem.id +
                                        '">' +
                                        subitem.subitem_name + '[' + subitem
                                        .subitem_score + '分]</option>');
                                });
                                form.render('select');
                            }
                        });
                    }
                });
                //监听提交
                form.on('submit(save)',
                    function(data) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-Token': $('input[name="_token"]').val()
                            }
                        });
                        let url = '/dormitory-ratings/' + {{ $dormitoryRating->id }};
                        console.log(url);
                        $.ajax({
                            url: url,
                            data: data.field,
                            type: 'PATCH',
                            dataType: "json",
                            success: function(d) {
                                if (d.error) {
                                    layer.msg('保存失败:' + d.message, {
                                        icon: 2,
                                        time: 1000
                                    });
                                } else {
                                    layer.alert('保存成功', {
                                        icon: 6,
                                        time: 5000
                                    }, function() {
                                        //关闭当前frame
                                        xadmin.close();
                                        // 可以对父窗口数据表进行刷新
                                        parent.layui.table.reload('data-table');
                                    });
                                }
                            },
                            error: function(err) {
                                console.log(err)
                                layer.msg('保存失败', {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        });
                        return false;

                    });


            });
    </script>
</body>

</html>
